<script type="text/x-template" id="tinymce-template">
    <textarea ref="ta" :id="id"></textarea>
</script>
<script>
    Vue.component('Tinymce', {
        template: '#tinymce-template',
        props: {
            id: {
                type: String,
                default: '',
            },
            value: {
                type: String,
                default: ''
            },
            height: {
                type: Number,
                default: 300,
            }
        },
        watch: {
            value(v) {
                console.log(v)
            } 
        },
        beforeMount() {
            if(!this.id) {
                this.id = parseInt(Math.random() * 100000) + ''
            }
        },
        mounted() {
            const that = this
            tinymce.init({
                selector: '#' + this.id,
                // content_style: "img {max-width:100%;}",
                plugins: 'code image',
                toolbar:'code undo redo | styleselect | bold italic | link image',
                height: this.height,
                language_url : '/static/tinymce/zh_CN.js',
                language:'zh_CN',
                setup: function (ed) {
                    ed.on("change",function () {
                        const t = ed.getBody().innerHTML;
                        that.$emit('input', t)
                    })
                },
                image_description: false,
                // image_advtab: true,
                images_upload_handler: function (blobInfo, success, failure, progress) {
                    var xhr, formData;
                    var file = blobInfo.blob();//转化为易于理解的file对象
                    uploadServer('/admin/upload', file, progress, function(res, data) {
                        if(!res) return failure(data);
                        return success(data.url)
                    })
                }
            });
        },
        data () {
            return {
            }
        },
        methods: {
        }
    })
</script>